<template>
  <div class="main" style="margin: 10px">
    <el-card>
      <too-bar :AddBtnAuth="AddBtnAuth" @handleAdd="handleAdd"></too-bar>
      <el-card style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>角色列表</span>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="#" align="center">
          </el-table-column>
          <el-table-column prop="title" label="角色名" align="center">
          </el-table-column>
          <el-table-column prop="roleType" label="角色级别" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.roleType }}级</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="创建时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.date | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="success"
                :disabled="
                  scope.row.roleType == 1 ||
                  scope.row.roleType == 2 ||
                  scope.row.roleType == 3
                "
                @click.native.prevent="setPermissions(scope.row)"
              >
                分配权限
              </el-button>
              <el-button
                type="warning"
                :disabled="
                  scope.row.roleType == 1 ||
                  scope.row.roleType == 2 ||
                  scope.row.roleType == 3
                "
                @click.native.prevent="showEditDialog(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                :disabled="
                  scope.row.roleType == 1 ||
                  scope.row.roleType == 2 ||
                  scope.row.roleType == 3
                "
                @click.native.prevent="handleDel(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!-- dialog -->
    <roles-dialog :rolesDialog="rolesDialog" :formData="formData" @addRoles="addRoles" @editRoles="editRoles"></roles-dialog>
    <PermissionsDialog ref='child' :permissionsDialog="permissionsDialog" :defaultkey="defaultkey" @resetDefaultKey="resetDefaultKey" @giveRules="giveRules"></PermissionsDialog>
  </div>
</template>

<script>
import TooBar from "@/components/System/toobar";
import {
  getRolesList,
  authorize,
  addRoles,
  editRoles,
  deleteRoles,
} from "@/api/system/index";
import RolesDialog from '@/components/System/roles/rolesDialog';
import PermissionsDialog from '@/components/System/roles/permissionsDialog'
export default {
  components: {
    TooBar,
    RolesDialog,
    PermissionsDialog
  },
  data() {
    return {
      AddBtnAuth: ["add"],
      tableData: [],
      loading: false,
      rolesDialog: {
        show: false,
        title: "",
      },
      formData:{},
      permissionsDialog:{
          show:false
      }
    };
  },
  mounted() {
    this.getRolesList();
  },
  methods: {
    getRolesList() {
      getRolesList().then((res) => {
        this.tableData = res.data;
      });
    },
    handleAdd(){
      this.rolesDialog = {
        show: true,
        title: "新增角色",
        option: 'add'
      }
      this.formData = {
        title: "",
        roleType: ""
      }
    },
    addRoles(){
        addRoles(this.formData).then(res=>{
            this.rolesDialog.show = false
            console.log("add ojbk")
            this.getRolesList()
        })
    },
    showEditDialog(row){

       this.rolesDialog = {
        show: true,
        title: "编辑角色",
        option: 'edit'
      }
      this.formData = {
        id: row._id,
        title: row.title,
        roleType: row.roleType
      }


    },
    editRoles(){
        editRoles(this.formData, this.formData.id).then(res => {
            this.rolesDialog.show = false
            this.$notify({
                title: '成功',
                message: '编辑角色成功！',
                type: 'success'
            });
            this.getRolesList()
        })
    },
    handleDel(row){
        deleteRoles(row._id, { roleType: row.roleType }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRolesList()
        })
    },
    setPermissions(row){
        this.permissionsDialog = {
            show:true,
            id:row._id
        }
        this.$refs.child.isCheck = true
        let arr =row.rules.split(',')
        this.defaultkey = arr
    },
    resetDefaultKey(){
        this.defaultkey = []
    },
    giveRules(data){
        authorize(this.permissionsDialog.id, { rules: data }).then(res => {
        this.$notify({
          title: '成功',
          message: '分配成功！',
          type: 'success'
        });
        this.permissionsDialog.show = false
        this.getRolesList()
      })
    }
  },
};
</script>

<style lang="less" scoped>
</style>